import LineMaterialProperty from '../../lib/LineMaterialProperty'

export default {
    data() {
        return {
            image: require('@/assets/map/poly-rivers.png'),
            color: '#309EF3', // 默认颜色
            repeatFactor: 1,
            stateRIVL: '',
            lastSelRIVLID: '',
            colorsRIVL: ['#7FD165', '#309EF3', '#E8E500',
                '#F2A408', '#EF3C45', '#964FD2', '#C93EC0']
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        basin: {
            handler: function(name) {
                this.$nextTick(() => {
                    this.creatHL()
                })
            },
            immediate: true
        }
    },
    beforeDestroy() {
        if (this.screenSpaceEventHandlerRIVL) {
            this.screenSpaceEventHandlerRIVL.destroy()
            this.screenSpaceEventHandlerRIVL = null
        }
    },
    created() {
        this.MapRIVL = new Map()
        this.$eventBus.$on('EB_YB_HS_INFO_List', this.EB_YB_HS_INFO_List)
        this.$eventBus.$on('EB_YJ_LJ_CardSel_Res_RIVE', this.changeColorByEB_YJ_LJ)
        this.$eventBus.$on('resetRIVLColor', this.resetColorAndEvent)
        this.$eventBus.$on('flyToRIVL', this.flyToRIVL)
    },
    mounted() {

    },
    methods: {
        creatHL() {
            this.clearHL()
            // console.log('this.layerList2',this.layerList2);
            
            if(this.layerList2[1].children.HL.show){
                var urlJson = `${mapConfig.resUrlPre}/geojson/${this.basin}/RIVL.json`
                this.$axios.get(urlJson).then(resJson => {
                    this._dataSourceRIVL = new Cesium.CustomDataSource('PolylineDataSource')
                    resJson.data.features.forEach((feature,index) => {
                        // 添加了新唯一属性（1228）
                        const RVCDIndex = feature.properties.RVCD + "_" + index
                        feature.properties.RVCDIndex = RVCDIndex

                        var RVLEVEL = Number(feature.properties.RVLEVEL)
                        var lonlats = []
                        var coordinates = feature.geometry.coordinates
                        if (feature.geometry.type === 'MultiLineString') {
                            coordinates = feature.geometry.coordinates[0] // 新增的流域有点区别
                        }
                        coordinates.forEach(coordinate => {
                            lonlats.push(...coordinate)
                        })
                        var repeat = feature.properties['RVLEN'] / 500
                        var lineMaterialProperty = new Cesium.LineMaterialProperty({
                            image: this.image,
                            duration: 4000,
                            color: Cesium.Color.fromCssColorString(this.color),
                            repeat: repeat / RVLEVEL,
                            highlight: false
                        })
                        var polylineEntity = {
                            repeat: repeat,
                            eventName: null,
                            prop: feature.properties,
                            polyline: {
                                positions: Cesium.Cartesian3.fromDegreesArray(lonlats),
                                width: RVLEVEL * 3,
                                material: lineMaterialProperty,
                                clampToGround: true,
                                classificationType: Cesium.ClassificationType.BOTH // TERRAIN BOTH
                            }
                        }
                        polylineEntity = this.$viewer.entities.add(polylineEntity)
                        this.MapRIVL.set(feature.properties.RVCDIndex, polylineEntity)
                    })
                    this.stateRIVL = 'inited'
                    this.initEvevtRIVL()
                })
            }else{
                this.clearHL()
            }
            
        },
        flyToRIVL(rvcd) {
            if (this.lastSelRIVLID !== '') {
                var entityLast = this.MapRIVL.get(this.lastSelRIVLID)
                if (entityLast) {
                    entityLast.polyline.material.highlight = false
                }
            }

            var entity = this.MapRIVL.get(rvcd)
            if (entity) {
                this.lastSelRIVLID = rvcd
                const len = entity.prop['RVLEN'] * 3
                entity.polyline.material.highlight = true
                this.$viewer.flyTo(entity, {
                    duration: 0.5,
                    offset: {
                        heading: this.$viewer.camera.heading,
                        pitch: this.$viewer.camera.pitch,
                        range: len
                    }
                })
            }
        },
        EB_YB_HS_INFO_List(res, perioD_END) {
            res.forEach(item => {
                var color = this.colorsRIVL[Number(item.level - 1)]
                item.rvcdList.forEach(rivl => {
                    var entity = this.MapRIVL.get(rivl.rvcd)
                    if (entity) {
                        entity.eventName = 'RIVL流量分析'
                        entity.polyline.material.color = Cesium.Color.fromCssColorString(color)
                        entity.propByGetFloodMap = rivl
                        entity.propByGetFloodMap.perioD_END = perioD_END // 为弹窗附加字段
                    }
                })
            })
        },

        // 预警-预警信息-预报预警 卡片点击
        changeColorByEB_YJ_LJ(e) {
            var entity = this.MapRIVL.get(e.ewcode)
            if (entity) {
                entity.eventName = 'RIVL临近预警'
                entity.polyline.material.color = Cesium.Color.fromCssColorString(e.color)
                entity.propByYbyj = e.item
            }
        },

        // 重置河流颜色与事件
        resetColorAndEvent() {
            this.lastSelRIVLID = ''
            this.MapRIVL.forEach((entity, key) => {
                entity.eventName = null
                entity.polyline.material.color = Cesium.Color.fromCssColorString(this.color)
                entity.polyline.material.highlight = false
            })
            // this.$store.getters.eventCesiumOption.leftPickFns.delete('RIVL流量分析')
        },
        initEvevtRIVL() {
            var eventFn = pickedObject => {
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName
                ) {
                    if (pickedObject.id.eventName === 'RIVL流量分析' && pickedObject.id.propByGetFloodMap.maxq) {
                        const dlgParams = this.$store.getters.dlgParams
                        dlgParams.name = 'FloodAnalysisInfo'
                        dlgParams.params = pickedObject.id.propByGetFloodMap
                        // console.log(dlgParams.params)
                        this.$store.dispatch('dlgParams', dlgParams)
                    }
                }
            }
            this.$store.getters.eventCesiumOption.leftPickFns.set('RIVL流量分析', eventFn)
        },
        clearHL() {
            if (this.MapRIVL.size > 0) {
                this.MapRIVL.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.MapRIVL = new Map()
                this.lastSelRIVLID = ''
            }
        }
    }
}
